{% extends 'layout/basic.html' %} 
{% load static %} 
{% block title %}用户登录{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}">
<style>
    .error-msg {
        color: red;
        position: absolute;
        font-size: 12px;
    }
</style>
{% endblock %} 

{% block content %}
<div class="account">
    <div class="title">用户登录</div>
    <form method="POST" novalidate>
        <!-- crsf安全认证 -->
        {% csrf_token %}
        <!-- 循环遍历表单中字段 -->
        {% for field in form %}
        <!-- 确定存在code字段 -->
        {% if field.name == 'code' %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="row">
                <div class="col-xs-7">
                    {{ field }}
                    <span class="error-msg">{{ field.errors.0 }}</span>
                </div>
                <div class="col-xs-5">
                    <img src="{% url 'web:image_code' %}" id="imageCode" title='点击更换图片'>
                </div>
            </div>
        </div>
        {% else %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label> {{ field }}
            <span class="error-msg">{{ field.errors.0 }}</span>
        </div>
        {% endif %} {% endfor %}
        <div>
            <div style="float: right;">
                <a href="{% url 'web:login_sms' %}">短信验证码登录?</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <input id="btnSubmit" type="submit" class="btn btn-primary" value="登  录" />
            </div>
        </div>
    </form>
</div>

{% endblock %} 

{% block js %}
    <script>
        $(function() {
            $('#imageCode').click(function() {
                var oldSrc = $(this).attr('src');
                $(this).attr('src',oldSrc+"?");
            })
        })
    </script>

{% endblock %}